<template>
  <div class="login-container">
    <el-card class="login-card">
      <!-- 标题栏：支持 短信登录/账号登录 切换 -->
      <template #header>
        <div class="login-header">
          <div 
            class="login-tab" 
            :class="{ 'login-tab-active': currentTab === 'smsLogin' }"
            @click="currentTab = 'smsLogin'"
          >
            短信登录
          </div>
          <div 
            class="login-tab" 
            :class="{ 'login-tab-active': currentTab === 'accountLogin' }"
            @click="currentTab = 'accountLogin'"
          >
            账号登录
          </div>
        </div>
      </template>

      <!-- 协议弹窗：参考 UniApp 的协议确认逻辑 -->
      <el-dialog
        title="用户协议与隐私政策"
        v-model="agreementDialogVisible"
        width="500px"
        :close-on-click-modal="false"
      >
        <div class="agreement-content">
          <!-- 协议内容（实际项目中替换为真实协议文本或链接） -->
          <p>1. 请仔细阅读并同意《用户服务协议》</p>
          <p>2. 请仔细阅读并同意《隐私政策》</p>
        </div>
        <template #footer>
          <el-button @click="agreementDialogVisible = false">拒绝</el-button>
          <el-button type="primary" @click="handleAgree">同意</el-button>
        </template>
      </el-dialog>

      <!-- 登录表单：根据当前 Tab 切换 短信/账号 表单 -->
      <el-form 
        ref="loginFormRef" 
        :model="loginForm" 
        :rules="currentRules" 
        class="login-form"
        validate-trigger="blur"
      >
        <!-- 通用：手机号输入（短信/账号登录共用） -->
        <el-form-item prop="mobile">
          <el-input
            v-model="loginForm.mobile"
            placeholder="请输入手机号/账号"
            prefix-icon="Phone"
            maxlength="11"
            @input="handlePhoneInput"
          />
        </el-form-item>

        <!-- 条件渲染：短信登录显示验证码，账号登录显示密码 -->
        <el-form-item 
          v-if="currentTab === 'smsLogin'" 
          prop="code"
        >
          <el-input
            v-model="loginForm.code"
            placeholder="请输入验证码"
            prefix-icon="Key"
            maxlength="4"
          >
            <template #suffix>
              <el-button
                :disabled="countdown > 0 || !isPhoneValid"
                @click="getCode"
                type="text"
                class="code-btn"
              >
                {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item 
          v-if="currentTab === 'accountLogin'" 
          prop="password"
        >
          <el-input
            type="password"
            v-model="loginForm.password"
            placeholder="请输入密码"
            prefix-icon="Lock"
          >
            <!-- 忘记密码入口：参考 UniApp 的右侧按钮逻辑 -->
            <template #suffix>
              <el-button 
                type="text" 
                @click="handleForgotPassword"
                class="forgot-btn"
              >
                忘记密码
              </el-button>
            </template>
          </el-input>
        </el-form-item>

        <!-- 登录按钮（通用） -->
        <el-form-item>
          <el-button
            type="primary"
            class="login-btn"
            @click="handleLogin"
            :loading="loginLoading"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, unref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElForm, ElDialog } from 'element-plus'
import { useUserStore } from '@/store/user'
import AuthUtil from '@/api/member/auth'

// 1. 基础状态管理
const loginFormRef = ref<InstanceType<typeof ElForm>>()
const loginLoading = ref(false)
const countdown = ref(0)
const agreementDialogVisible = ref(false) // 协议弹窗控制
const agreeStatus = ref<boolean | null>(null) // 协议同意状态（参考 UniApp）

// 2. Tab 切换：控制 短信登录/账号登录
const currentTab = ref('smsLogin') // 默认短信登录

// 3. 登录表单数据（兼容两种登录方式）
const loginForm = reactive({
  mobile: '', // 手机号/账号（通用）
  code: '',   // 验证码（短信登录用）
  password: ''// 密码（账号登录用）
})

// 4. 表单校验规则（根据 Tab 切换）
const phoneReg = /^1[3-9]\d{9}$/ // 手机号正则
const accountReg = /^[a-zA-Z0-9_-]{4,16}$/ // 账号正则（可选，根据实际需求调整）

// 短信登录规则
const smsRules = reactive({
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: phoneReg, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 4, max: 4, message: '验证码为4位数字', trigger: 'blur' }
  ]
})

// 账号登录规则（参考 UniApp 的 mobile/password 校验）
const accountRules = reactive({
  mobile: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { 
      validator: (rule: any, value: string, callback: any) => {
        // 支持手机号或自定义账号格式
        if (phoneReg.test(value) || accountReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的手机号或4-16位账号'))
        }
      },
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度为6-20位', trigger: 'blur' }
  ]
})

// 当前激活的规则（根据 Tab 切换）
const currentRules = computed(() => {
  return currentTab.value === 'smsLogin' ? smsRules : accountRules
})

// 5. 辅助计算属性
const isPhoneValid = computed(() => phoneReg.test(loginForm.mobile)) // 手机号合法性
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 6. 事件处理：手机号输入过滤（只保留数字）
const handlePhoneInput = () => {
  loginForm.mobile = loginForm.mobile.replace(/\D/g, '') // 清除非数字字符
}

// 7. 短信登录：获取验证码（复用原逻辑）
const getCode = async () => {
  if (!isPhoneValid.value) {
    ElMessage.warning('请输入正确的手机号')
    return
  }

  try {
    const purePhone = loginForm.mobile.trim()
    await AuthUtil.sendSmsCode(purePhone, 'login') // 调用短信接口
    // 倒计时逻辑
    countdown.value = 60
    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) clearInterval(timer)
    }, 1000)
    ElMessage.success('验证码发送成功')
  } catch (error: any) {
    console.error('发送验证码失败:', error)
    ElMessage.error(error.data?.msg || '验证码发送失败，请重试')
  }
}

// 8. 账号登录：忘记密码（参考 UniApp 的跳转逻辑）
const handleForgotPassword = () => {
  // 实际项目中替换为「忘记密码」页面路由
  router.push('/reset-password') 
}

// 9. 协议处理：同意/拒绝（参考 UniApp 的 agreeStatus 逻辑）
const handleAgree = () => {
  agreeStatus.value = true
  agreementDialogVisible.value = false
}

// 10. 核心登录逻辑（兼容短信/账号两种方式）
const handleLogin = async () => {
  // 步骤1：表单基础校验
  try {
    await unref(loginFormRef)?.validate()
  } catch (error) {
    return // 校验失败直接返回
  }

  // 步骤2：协议校验（参考 UniApp 的协议确认逻辑）
  if (agreeStatus.value !== true) {
    agreementDialogVisible.value = true // 未同意则打开协议弹窗
    if (agreeStatus.value === false) {
      ElMessage.warning('您已拒绝协议，无法继续登录')
    }
    return
  }

  // 步骤3：提交登录请求
  loginLoading.value = true
  const pureMobile = loginForm.mobile.trim()

  try {
    let loginRes: any
    // 根据当前 Tab 调用不同登录接口
    if (currentTab.value === 'smsLogin') {
      // 短信登录（参数与接口对齐）
      loginRes = await AuthUtil.smsLogin({
        mobile: pureMobile,
        code: loginForm.code
      })
    } else {
      // 账号密码登录（复用 UniApp 的 AuthUtil.login 接口）
      loginRes = await AuthUtil.login({
        mobile: pureMobile,
        password: loginForm.password
      })
    }

    // 登录成功：更新 Store + 跳转页面
    if (loginRes.code === 0) {
      userStore.login({
        phone: pureMobile,
        token: loginRes.data.token,
        refreshToken: loginRes.data.refreshToken
      })
      // 跳转目标页（优先取 redirect 参数，无则跳首页）
      const redirectPath = (route.query.redirect as string) || '/'
      router.push(redirectPath)
      ElMessage.success('登录成功')
    }
  } catch (error: any) {
    console.error('登录失败:', error)
    ElMessage.error(error.data?.msg || '登录失败，请重试')
  } finally {
    // 无论成功失败，关闭加载状态
    loginLoading.value = false
  }
}
</script>

<style scoped>
/* 容器样式：居中布局 */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

/* 卡片样式：控制宽度与阴影 */
.login-card {
  width: 100%;
  max-width: 450px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* Tab 切换样式：下划线激活态 */
.login-header {
  display: flex;
  gap: 40px;
  margin-bottom: 20px;
}
.login-tab {
  font-size: 18px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}
.login-tab-active {
  color: #165dff;
  border-bottom-color: #165dff;
}

/* 表单样式：间距调整 */
.login-form {
  padding: 0 20px;
}
.login-form .el-form-item {
  margin-bottom: 24px;
}

/* 按钮样式：登录按钮全屏，验证码按钮倒计时灰显 */
.login-btn {
  width: 100%;
  height: 45px;
  font-size: 16px;
}
.code-btn:disabled {
  color: #999 !important;
  cursor: not-allowed;
}

/* 忘记密码按钮样式：右对齐 */
.forgot-btn {
  color: #165dff !important;
  padding-right: 0;
}

/* 协议弹窗内容样式：滚动条优化 */
.agreement-content {
  max-height: 300px;
  overflow-y: auto;
  line-height: 1.8;
  color: #666;
}
</style>